<template>
  <DraggableModal
    :visible="props.showModal"
    :title="`${props.title}系统`"
    :maskClosable="true"
    @ok="modalOkFn"
    @cancel="modalCancelFn"
  >
    <Form
      ref="formRef"
      :model="state.data"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Row>
        <Col :span="12">
          <a-form-item
            label="系统类型"
            name="type"
            :label-col="{ span: 10 }"
            :wrapper-col="{ span: 12 }"
          >
            <Select v-model:value="state.data.type" :options="systemType" />
          </a-form-item>
        </Col>

        <Col :span="12">
          <a-form-item
            label="系统名称"
            name="name"
            :label-col="{ span: 10 }"
            :wrapper-col="{ span: 12 }"
          >
            <Input v-model:value="state.data.name" />
          </a-form-item>
        </Col>
      </Row>

      <a-form-item label="对接平台" name="platform" :wrapper-col="{ span: 6 }">
        <Select v-model:value="state.data.platform" :options="dockingPlatform" />
      </a-form-item>

      <a-form-item label="系统对接地址" name="address">
        <Input v-model:value="state.data.address" />
      </a-form-item>

      <Row>
        <Col :span="12">
          <a-form-item
            label="用户名"
            name="username"
            :label-col="{ span: 10 }"
            :wrapper-col="{ span: 12 }"
          >
            <Input v-model:value="state.data.username" />
          </a-form-item>
        </Col>

        <Col :span="12">
          <a-form-item
            label="密码"
            name="passwd"
            :label-col="{ span: 10 }"
            :wrapper-col="{ span: 12 }"
          >
            <Input v-model:value="state.data.passwd" />
          </a-form-item>
        </Col>
      </Row>

      <a-form-item label="描述" name="desp">
        <a-textarea v-model:value="state.data.desp" />
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { message, Form, Input, Select, Row, Col } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { systemType, dockingPlatform } from '../columns';
import { putThirdSystem, postThirdSystem } from '../../../api/tripartite-system';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
    title: string;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      state.data = props.data;
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk'): void;
}>();
const formRef = ref();

/**
 * data
 */
const state: {
  data: any;
} = reactive({
  data: {},
});
const rules = {
  type: [{ required: true, message: '数据必填!' }],
  name: [{ required: true, message: '数据必填!' }],
  platform: [{ required: true, message: '数据必填!' }],
  address: [{ required: true, message: '数据必填!' }],
};

/**
 * fn
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params: any = {
    address: state.data.address,
    desp: state.data.desp,
    name: state.data.name,
    passwd: state.data.passwd,
    platform: state.data.platform,
    type: state.data.type,
    username: state.data.username,
  };
  if (props.title === '新增') {
    await postThirdSystem(params);
  } else {
    params.id = state.data.id;
    await putThirdSystem(params);
  }
  message.success('操作成功！');
  emits('editModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  emits('update:showModal', false);
};
</script>

<style scoped></style>
